/**
 * Created by apple on 16/12/19.
 */
var num = 0;
var type = '';
var thisDom;

//页面滚动时执行
window.onscroll = function () {
    winScrollTop = $(window).scrollTop();
    rightTop = $(".right").offset().top;
    //发帖页右侧
    if (winScrollTop > rightTop) {
        $('#container').find('.right-area').addClass('right-fixed');
    }
    else {
        $('#container').find('.right-area').removeClass('right-fixed');
    }

};


//缩略图区域隐藏/显示
function thumbShow() {
    if ($(".thumbnail-box").find('li').length <= 0) {
        $(".thumbnail").css('opacity', '0');
    }
    else {
        $(".thumbnail").css('opacity', '1');

    }
}


//选择"原创"  or  "转载"
$(document).on('click', '.thread-resource-interest .resource-btn', function () {
    $('.thread-resource-interest .resource-btn').removeClass('resourceChoice-curr');
    $(this).addClass('resourceChoice-curr');
});


//设为封面
$(document).on('click', '.button_cover', function () {
    var _info_1 = $(this);
    var _data_num = 0;
    $('.button_cover').each(function () {
        var _data_cover = $(this).attr("data-cover");
        if (_data_cover == "true") {
            var _info_2 = $(this);
            _data_num = 1;
            layer.msg('封面已设置,是否需要修改?', {
                time: 0, //不自动关闭
                btn: ['是', '否'],
                yes: function (index) {
                    layer.close(index);
                    _info_2.attr('data-cover', 'false');
                    _info_2.css('opacity', '1');
                    _info_1.attr('data-cover', 'true');
                    _info_1.css('opacity', '0');
                    layer.msg("设置成功!")
                }
            });
        }
    });
    if (_data_num == 0) {
        layer.msg('设为封面后,该图片及其相关描述将不再出现在内容中,您是否要继续该操作?', {
            time: 0, //不自动关闭
            btn: ['是', '否'],
            yes: function (index) {
                layer.close(index);
                _info_1.attr("data-cover", "true");
                _info_1.css('opacity', '0');
                layer.msg("设置成功!")
            }
        });
    }
});


//===================================================================================================================//
//                                                      发帖前必看                                                    //
//===================================================================================================================//
//"发帖前必看"按钮
$(document).on('click', '#pub-before-btn', function () {
    addPubbefore();
});


//"发帖前必看"
function addPubbefore() {
    var arr1 = ['二维码', 'QQ号', '网址', '新媒体账号', '商家信息', '推广文案'];
    var arr2 = ['1、诈骗、盗版杀毒软件、股票基金、贩卖赌博机、代开发票、违禁药物、国内购买使用及发布的仿真枪（包含枪械模型）、弩、匕首等管制器具、考题答案、淫秽信息、宣扬邪教组织、反党反政府等言论',
        '2、含侮辱、辱骂他人或地域等攻击性的言论', '3、泄露个人隐私事件，人肉搜索等', '4、虚拟物品、国家违禁物品广告', '5、意图以危险方式危及社会公共安全的文字、图片、视频',
        '6、发布色情图片，视频，截图，文字，网址', '7、盗图、盗帖等抄袭行为'];
    var $str = '<div class="add-pub-before" id="add-pub-box"><div class="add-pub-box"><a href="javascript:void(0);" class="remove">×</a>' +
        '<div class="apb-title">含有以下内容的帖子将不会被推荐</div><div class="apb-content">';
    var l1 = arr1.length;
    var l2 = arr2.length;
    for (var i = 0; i < l1; i++) {
        $str += '<div><i></i>' + arr1[i] + '</div>';
    }
    $str += '</div><div class="apb-title">含有以下内容的帖子将会被删除<span>情节严重者将进行永久禁言处理</span></div><div class="apb-content">'
    for (var j = 0; j < l2; j++) {
        $str += '<p>' + arr2[j] + '</p>';
    }
    $str += '</div></div></div>'
    $('body').append($str);
    $('#add-pub-box .remove').on('click', function () {
        $('#add-pub-box').remove();
    });
}


//===================================================================================================================//
//                                                      "发现"弹出框                                                  //
//===================================================================================================================//
//点击"添加发现的类别"按钮
$(document).on('click', '.add-interest-btn', function () {
    if ($('.pubThreadContainer .interest-list').css('display') == 'none') {
        $('.pubThreadContainer .interest-list').show();
    } else {
        $('.pubThreadContainer .interest-list').hide();
    }
});


//点击"添加发现的类别"按钮里面的"X"
$(document).on('click', '.interest-list .remove', function () {
    if ($('.pubThreadContainer .interest-list').css('display') == 'none') {
        $('.pubThreadContainer .interest-list').show();
    } else {
        $('.pubThreadContainer  .interest-list').hide();
    }
});


//选择"添加发现的类别"里面的内容,并显示出来
$(document).on('click', '.pubThreadContainer .interest-list li', function () {
    var _text = $(this).children('a').html();
    var _data_id = $(this).children('a').attr('data-mototype-id');
    $('.interest-label-list li').each(function () {
        var m = $(this).attr('id');
        if (m == _data_id) {
            //说明已经选中过该类别
            $(this).remove();
        }
    });
    var interest_list_content = "<li id=" + _data_id + ">" +
        "<a>" +
        "<span>" + _text + "</span>" +
        "</a>" +
        "<a href='javascript:;'>" +
        "</a>" +
        "<a href='javascript:;' class='remove'>×</a>" +
        "</li>";
    $('.interest-label-list').html(interest_list_content);
    $('.pubThreadContainer .interest-list').hide();
    $('.add-interest-btn').hide();
});


//将选好的类别内容删除
$(document).on('click', '.interest-label-list .remove', function () {
    $(this).parent('li').remove();
    $('.add-interest-btn').show();
});


//发现的类别列表内容
function interest_list() {
    $.get(url_link + 'mototypes', function (data) {
        try {
            var obj = JSON.parse(data);
            var interest_list = "";
            if (obj.code == 0) {
                interest_list += "<span><em></em><i></i></span><a href='javascript:;' class='remove'>×</a></li><div class='interest-list-show'> ";
                $.each(obj.data, function (i, item) {
                    interest_list += "<li><a href='javascript:;' data-mototype-id=" + item.mototype_id + ">" + item.name + "</a></li>"
                });
                interest_list += "</div>"
                $('.interest-list').html(interest_list)
            }
        } catch (e) {
        }
    })
}


//===================================================================================================================//
//                                                      增加模块内容                                                   //
//===================================================================================================================//
//添加"+"按钮
$(document).on('click', '.insert-model-btn', function () {
    $(this).css({
        "height": "0px",
        "border-width": "0px"
    });
    $(this).parents("li").find('.add-model').css("height", "92px");
});


//关闭"x"按钮(添加文字,图片等内容行的关闭按钮)
$(document).on('click', '.close-add-btn-box', function () {
    $(this).parent('.add-model').css({
        "height": "0px"
    });
    $(this).parents("li").find(".insert-model-btn").css({
        "height": "40px",
        "border-width": "1px"
    });
});


//删除模块
$(document).on("click", ".thread-model-remove", function () {
    var _remove = $(this);
    layer.msg('您真的要删除该模块吗?此操作不可撤回', {
        time: 0, //不自动关闭
        btn: ['确定', '取消'],
        yes: function (index) {
            layer.close(index);
            var part = _remove.parent().parent().attr('data-name');
            _remove.parent().parent().remove();
            $(".thumbnail-box li").each(function () {
                var new_part = $(this).attr('data-name');
                if (new_part == part) {
                    $(this).remove();
                } else if (new_part > part) {
                    $(this).find('.emReorder').html($(this).index() + 1)
                }
            });
        }
    });
});


//===================================================================================================================//
//                                                文字  图片  视频  上传                                               //
//===================================================================================================================//
var img_url = '';//又拍云图片路径
var video_url = '';//又拍云视频路径
var _title = '';//又拍云视频名字
var _id = 0;
var _img_height = '';//上传的图片的高度;
var _img_width = '';//上传的图片的宽度;
var addImgHtml_show_height = '';//展示的图片框;

//"添加文字"按钮
$(document).on('click', '.add-txt-btn', function () {
    $('.add-img-box').hide();
    $('.add-video-box').hide();
    num = $('.thread-content-list li').length + 1;
    type = "text";
    addTxtHtml();
    addTxtThumb();
    //缩略图区域显示/隐藏
    thumbShow();
    $('.add-model').each(function () {
        if ($(this).children('a').length != 0) {
            //说明不是在页面上原有的按钮,在进行点击,需要将其隐藏
            $(this).css("height", "0px");
            $(this).parents("li").find(".insert-model-btn").css({
                "height": "40px",
                "border-width": "1px"
            });
        }
    });
});


//文字展示————文字框
function addTxtHtml() {
    var html = '<li id="mainSort' + num + '" data-name="' + num + '" data-sort="' + num + '" type="' + type + '">' +
        '<div class="mainSortBox">' +
        '<a href="javascript:;" class="remove thread-model-remove">×</a>' +
        '<h3 class="sort-handle">' +
        '<span><i></i><i></i><i></i></span>' +
        '</h3>' +
        '<textarea placeholder="在此输入正文内容。" class="txt-input" style="color:black;"></textarea>' +
        '</div>' +
        '<a href="javascript:;" class="insert-model-btn" title="插入模块">+</a>' +
        '<span class="add-model" style="height:0;margin-top:0;margin-bottom:10px">' +
        '<a href="javascript:;" class="close-add-btn-box">×</a>' +
        '<div class="add-model-box">' +
        '<div class="intro">' +
        '<h5>点击右侧按钮，添加相对应的元素模块</h5>' +
            //'<h6>还不太会用？看看<a href="publish-course.html" target="_blank">发帖教程</a></h6>' +
        '</div>' +
        '<div class="btn-box">' +
        '<a href="javascript:;" class="add-txt-btn" id="add-txt' + num + '"><i></i>添加文字</a>' +
        '<a href="javascript:;" class="add-img-btn" id="add-img' + num + '"><i></i>添加图片</a>' +
        '<a href="javascript:;" class="add-video-btn" id="add-video' + num + '"><i></i>添加视频</a>' +
        '</div>' +
        '</div>' +
        '</span>' +
        '</li>';
    $(".thread-content-list").append(html);
}


//文字展示————右侧
function addTxtThumb() {
    var html = '<li id="thumb' + num + '" type="' + type + '" data-name="' + num + '" onmouseover="txt_show(this)" onmouseout="txt_out(this)">' +
        '<a href="javascript:;">' +
        '<em class="emReorder">' + num + '</em>' +
        '<img src="../../image/publish_txt.png"></a></li>';
    $(".thumbnail-box ol").append(html);
}


//显示文本框
function txt_show(data) {
    var _data_name = $('#' + data.id).attr('data-name');
    $('.thumbnail .txt-show').show();
    //取余,判断是在左边还是右边
    var _remainder = _data_name % 2;
    if (_remainder == 1) {
        //有余数,说明在左边
        $('.thumbnail .txt-show').css({
            left: '20px',
            right: 'auto'
        });
        $('.thumbnail .txt-show span').css("text-align", "left");
    } else {
        //说明在右边
        $('.thumbnail .txt-show').css({
            right: '20px',
            left: 'auto'
        });
        $('.thumbnail .txt-show span').css("text-align", "right");
    }
    //获取高度
    $('.thumbnail .txt-show').css('top', (Math.ceil(_data_name / 2) - 1) * 82 + 174 + 'px');

    //获取内容
    var _data_content = $('#mainSort' + _data_name).find('.txt-input').val();
    $('.thumbnail .txt-show p').html(_data_content)
}


//隐藏文本框
function txt_out(data) {
    $('.thumbnail .txt-show').hide();
}


//"添加图片"按钮(打开浮层)
$(document).on('click', '.add-img-btn', function () {
    $('.add-img-box').hide();
    $('.add-video-box').hide();
    var thisTop = $(this).offset().top - 95;
    //var thisTop = $(this).offset().top + 50;
    var thisLeft = $(this).offset().left - 150;
    if ($(".add-img-box").is(":visible")) {
        $(".add-img-box").slideUp(200, function () {
            $(".add-img-box").css({
                top: thisTop + 'px',
                left: thisLeft - 440 + 'px'
            });
            $(".add-img-box").slideDown(200);
            $(".add-video-box").slideUp(200);
        });
    } else {
        $(".add-img-box").css({
            top: thisTop + 'px',
            left: thisLeft - 440 + 'px'
        });
        $(".add-img-box").slideDown(200);
        $(".add-video-box").slideUp(200);
    }
    $(".moxie-shim").css({
        width: '150px',
        height: '40px',
        top: "50px",
        left: "64px"
    });
});


//图片框
function addImgHtml() {
    var html = '<li id="mainSort' + num + '" data-name="' + num + '" data-sort="' + num + '" type="' + type + '" >' +
        '<div class="mainSortBox">' +
        '<a href="javascript:;" class="remove thread-model-remove">×</a>' +
        '<h3 class="sort-handle">' +
        '<span><i></i><i></i><i></i></span>' +
        '</h3>' +
        '<div class="content-box" style="overflow:hidden;height: ' + addImgHtml_show_height + 'px;" >' +
        '<img src=' + img_url + ' style="height: 100%;" data-width=' + _img_width + ' data-ratio=' + ratio + '>' +
        '</div>' +
        '<button class="button_cover" data-cover="false">设为封面</button>' +
        '<textarea placeholder="在此添加上方图片的描述，描述不超过500字。" class="description-input"></textarea>' +
        '</div>' +
        '<a href="javascript:;" class="insert-model-btn" title="插入模块">+</a>' +
        '<span class="add-model" style="height:0;margin-top:0;margin-bottom:10px">' +
        '<a href="javascript:;" class="close-add-btn-box">×</a>' +
        '<div class="add-model-box">' +
        '<div class="intro">' +
        '<h5>点击右侧按钮，添加相对应的元素模块</h5>' +
            //'<h6>还不太会用？看看<a href="publish-course.html" target="_blank">发帖教程</a></h6>' +
        '</div>' +
        '<div class="btn-box">' +
        '<a href="javascript:;" class="add-txt-btn" id="add-txt' + num + '"><i></i>添加文字</a>' +
        '<a href="javascript:;" class="add-img-btn" id="add-img' + num + '"><i></i>添加图片</a>' +
        '<a href="javascript:;" class="add-video-btn" id="add-video' + num + '"><i></i>添加视频</a>' +
        '</div>' +
        '</div>' +
        '</span>' +
        '</li>';
    $(".thread-content-list").append(html);
}


//图片右侧展示
function addImgThumb() {
    var html = '<li id="thumb' + num + '" type="' + type + '" data-name="' + num + '">' +
        '<a href="javascript:;">' +
        '<em class="emReorder">' + num + '</em>' +
        '<img src=' + img_url + '  style="width: 124px;height: 82px;"></a></li>';
    $(".thumbnail-box ol").append(html);
}


//"添加视频"按钮(打开浮层)
$(document).on('click', '.add-video-btn', function () {
    $('.add-img-box').hide();
    $('.add-video-box').hide();
    //var thisTop = $(this).offset().top + 50;
    //var thisLeft = $(this).offset().left + 120;
    var thisTop = $(this).offset().top - 95;
    var thisLeft = $(this).offset().left - 20;
    if ($(".add-video-box").is(":visible")) {
        $(".add-video-box").slideUp(200, function () {
            $(".add-video-box").css({
                top: thisTop + 'px',
                left: thisLeft - 579 + 'px'
            });
            $(".add-video-box").slideDown(200);
            $(".add-img-box").slideUp(200);
        });
    }
    else {
        $(".add-video-box").css({
            top: thisTop + 'px',
            left: thisLeft - 579 + 'px'
        });
        $(".add-video-box").slideDown(200);
        $(".add-img-box").slideUp(200);
    }
    $(".moxie-shim").css({
        width: '150px',
        height: '40px',
        top: "40px",
        left: "30px"
    });
});


//上传视频
function setVideoPreview(file, id) {
    $('.loading').show();
    _id = id;
    if (file.files && file.files[0]) {
        var postfix = file.files[0].name.split('.').pop();
        postfix=postfix.toUpperCase( );
        if (postfix != "FLV" && postfix != "MP4" && postfix != "MOV" && postfix != "MPG" && postfix != "AVI" && postfix != "VOB"  && postfix != "WMV" && postfix != "ASF" && postfix != "F4V" && postfix != "MKV" && postfix != "3GP") {
            $('.loading').hide();
            layer.msg("上传仅支持：flv,mp4,mov,mpg,avi,vob,wmv,asf,f4v,mkv,3gp格式")
        } else {
            var reader = new FileReader();
            reader.onload = function (evt) {
                //上传视频
                $('#QRcode_' + id).html('<video src="' + evt.target.result + ' " style="width: 170px;height: 150px;" id="QRcode_kids_' + id + '">');
                //上传又拍云
                var ext = '.' + file.files[0].name.split('.').pop();
                _title = file.files[0].name;
                var config = {
                    bucket: 'motorcycle',
                    expiration: parseInt((new Date().getTime() + 3600000) / 1000),
                    // 尽量不要使用直接传表单 API 的方式，以防泄露造成安全隐患
                    form_api_secret: '0jWegIsJu9xVxJMrgp4ydONAxok='
                };
                var instance = new Sand(config);
                instance.upload("Video/" + parseInt((new Date().getTime() + 3600000) / 1000) + ext);

            };
            reader.readAsDataURL(file.files[0]);
        }
    } else {
        $('.loading').hide();
    }
}


//获取又拍云图片路径
document.addEventListener('uploaded', function (e) {
    for (var key in e.detail) {
        if (key === 'path') {
            if (_id == 1) {
                //上传视频
                video_url = "http://motorcycle.b0.upaiyun.com" + e.detail[key];
                $('#QRcode_kids_' + _id).attr('src', video_url);
            }
            setTimeout(function(){
                $('.loading').hide();
            },3000)
        }
    }
});


//显示视频内容框
$(document).on('click', '#pickfiles-video-right', function () {
    $('.loading').show();

    num = $('.thread-content-list li').length + 1;
    type = "video";
    if (video_url) {
        addVideoHtml();
        addVideoThumb();
        //缩略图区域显示/隐藏
        thumbShow();
        $(this).parents('.add-video-box').slideUp(200);
        $('.add-model').each(function () {
            if ($(this).children('a').length != 0) {
                //说明不是在页面上原有的按钮,在进行点击,需要将其隐藏
                $(this).css("height", "0px");
                $(this).parents("li").find(".insert-model-btn").css({
                    "height": "40px",
                    "border-width": "1px"
                });
            }
        });
        $('#QRcode_1').html("<img src='../../image/base/none_video.png' style='width: 170px;height: 150px;'>")
        video_url = "";
    } else {
        layer.msg("请先上传视频!")
    }
    setTimeout(function(){
        $('.loading').hide();
    },3000)
});


//视频框
function addVideoHtml() {
    var html = '<li id="mainSort' + num + '" data-name="' + num + '" data-sort="' + num + '" type="' + type + '">' +
        '<div class="mainSortBox">' +
        '<a href="javascript:;" class="remove thread-model-remove">×</a>' +
        '<h3 class="sort-handle">' +
        '<span><i></i><i></i><i></i></span>' +
        '</h3>' +
        '<div class="content-box" style="position:relative">' +
        '<video src=' + video_url + ' controls="controls" style="width: 728px;" ></video>' +
        '</div>' +
        '<textarea placeholder="在此添加上方视频的描述，描述不超过500字。" class="description-input"></textarea>' +
        '</div>' +
        '<a href="javascript:;" class="insert-model-btn" title="插入模块">+</a>' +
        '<span class="add-model" style="height:0;margin-top:0;margin-bottom:10px">' +
        '<a href="javascript:;" class="close-add-btn-box">×</a>' +
        '<div class="add-model-box">' +
        '<div class="intro">' +
        '<h5>点击右侧按钮，添加相对应的元素模块</h5>' +
            //'<h6>还不太会用？看看<a href="publish-course.html" target="_blank">发帖教程</a></h6>' +
        '</div>' +
        '<div class="btn-box">' +
        '<a href="javascript:;" class="add-txt-btn" id="add-txt' + num + '"><i></i>添加文字</a>' +
        '<a href="javascript:;" class="add-img-btn" id="add-img' + num + '"><i></i>添加图片</a>' +
        '<a href="javascript:;" class="add-video-btn" id="add-video' + num + '"><i></i>添加视频</a>' +
        '</div>' +
        '</div>' +
        '</span>' +
        '</li>';
    $(".thread-content-list").append(html);

}


//视频右侧展示
function addVideoThumb() {
    var html = '<li id="thumb' + num + '" type="' + type + '" data-name="' + num + '">' +
        '<a href="javascript:;">' +
        '<em class="emReorder">' + num + '</em>' +
        '<video src=' + video_url + ' style="width:124px;height:82px">' +
        '</a>' +
        '</li>';
    $(".thumbnail-box ol").append(html);
}


//===================================================================================================================//
//                                                        注意事项                                                    //
//===================================================================================================================//
//照片上传注意事项
$(document).on('click', '.img-warning-btn', function () {
    if ($('.img-warning').css('display') == "none") {
        $('.img-warning').show();
    } else {
        $('.img-warning').hide();
    }
});


//视频上传注意事项
$(document).on('click', '.video-warning-btn', function () {
    if ($('.video-warning').css('display') == "none") {
        $('.video-warning').show();
    } else {
        $('.video-warning').hide();
    }

});


//===================================================================================================================//
//                                                        发帖排序                                                    //
//===================================================================================================================//
//打开.关闭排序层
$(document).on('click', '#open-sortable-layer-btn', function () {
    $(".sort-layer-box").height($(window).height() - 170);
    $(".sort-layer-box").css("overflow", "auto");
    $(".sort-layer").height($(window).height());
    setTimeout(function () {
        $(".sort-layer").slideDown(300);
        $('body').addClass('body-overlay');
    }, 100);
    //排序层里面的内容展示
    sort_content_show();
    //拖动
    sort_move();
});


//排序层里面的内容展示
function sort_content_show() {
    var _info = "";
    $(".thumbnail-box li").each(function (i, item) {
        var _i = i + 1;
        var _type = $(this).attr('type');
        _info += "<li class='ui-selectee ui-sortable-handle' style='display: block;' draggable='true'>" +
            "<div class='sort-img-box'>" +
            "<em class='emReorder'>" + _i + "</em>";
        if (_type == "text") {
            //获取内容
            var _data_content = $('#mainSort' + _i).find('.txt-input').val();
            _info += "<img src='../../image/publish_txt.png' data-info='$$##1##$$" + _data_content + "' data-id=" + _i + " onmouseover='sore_show(this)' onmouseout='sore_out(this)'>"
        } else if (_type == "image") {
            var _data_all = "";
            var _data_url = $(this).find('img').attr('src');
            var _data_content = $('#mainSort' + _i).find('.description-input').val();
            var _data_width = $('#mainSort' + _i).find('img').attr('data-width');
            var _data_ratio = $('#mainSort' + _i).find('img').attr('data-ratio');
            var _data_cover = $('#mainSort' + _i).find('.button_cover').attr('data-cover');
            if (_data_content) {
                _data_all = "$$##2##$$" + _data_url + "$$##ImageInfo##$$Width" + _data_width + "AspectRatio" + _data_ratio + "$$##ImageCover##$$" + _data_cover + "$$##ImageDescription##$$" + _data_content
            } else {
                _data_all = "$$##2##$$" + _data_url + "$$##ImageInfo##$$Width" + _data_width + "AspectRatio" + _data_ratio + "$$##ImageCover##$$" + _data_cover
            }
            _info += "<img src=" + _data_url + " style='width: 120px;height: 80px;' data-info=" + _data_all + " data-id=" + _i + " onmouseover='sore_show(this)' onmouseout='sore_out(this)'>"
        } else {
            var _data_all = "";
            var _data_url = $(this).find('video').attr('src');
            var _data_content = $('#mainSort' + _i).find('.description-input').val();
            if (_data_content) {
                _data_all = "$$##3##$$" + _data_url + "$$##VideoDescription##$$" + _data_content
            } else {
                _data_all = "$$##3##$$" + _data_url
            }
            _info += "<img src='../../image/base/none_video.png' style='width: 120px;height: 80px;' data-info=" + _data_all + " data-id=" + _i + " onmouseover='sore_show(this)' onmouseout='sore_out(this)'>"
        }
        _info += "</div></li>"
    });
    $('#sort_content').html(_info)
}

//移动
function sort_move() {
    var imgarrs = document.querySelectorAll("li");
    var dragnow = null;//目前被拽着的物体
    var _data_div = "";
    var _data_first = "";
    var _data_second = "";
    for (var i = 0; i < imgarrs.length; i++) {
        addHandler(imgarrs[i], 'dragstart', dragstart);
        addHandler(imgarrs[i], 'dragenter', dragenter);
        addHandler(imgarrs[i], 'dragover', dragover);
        addHandler(imgarrs[i], 'dragleave', dragleave);
        addHandler(imgarrs[i], 'drop', drop);
        addHandler(imgarrs[i], 'dragend', dragend);
    }
    function addHandler(node, type, handler) {
        if (window.addEventListener) {
            node.addEventListener(type, handler, false);
        } else if (window.attachEvent) {
            node.attachEvent('on' + type, handler);
        }
    }

    //拖曳过程
    function dragstart(e) {//被拖拽元素
        if (typeof e.target.style.opacity != 'undefined') {
            e.target.style.opacity = '0.4';
        } else {
            e.target.style.filter = "alpha(opacity=40)";
        }

        addClass(e.target, "zIndex");
        _data_div = $(e.target);
        _data_first = $(e.target).attr("data-info");//移动的图片的信息
        e.dataTransfer.setData("text", e.target.src);//存储图片的src
        dragnow = e.target;//目前被拽的物体
    }

    function dragover(e) {//拖拽目标身上的效果
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    }

    function dragenter(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (typeof e.target.classList != 'undefined') {
            e.target.classList.add('hover');
        } else {
            addClass(e.target, "hover");
        }
    }

    function dragleave(e) {
        removeClass(e.target, "hover");
    }

    function drop(e) {

        var src = e.dataTransfer.getData("text");//获取src
        _data_second = $(e.target).attr("data-info");//被移动的图片的原始信息
        $(e.target).attr("data-info", _data_first)//被移动的图片信息
        _data_div.attr("data-info", _data_second)//被移动的图片信息

        e.preventDefault();
        if (e.stopPropagation) {
            e.stopPropagation();
        } else if (e.attachEvent) {
            e.cancelBubble = true;
        }
        if (dragnow == e.target) {
            removeClass(e.target, "hover");
            removeClass(e.target, "zIndex");
            return;
        } else {//如果拽着的元素与被拽着的元素一样，不用处理
            dragnow.src = e.target.src;
            e.target.src = src;
            removeClass(e.target, "hover");
            removeClass(e.target, "zIndex");
        }
    }

    function dragend(e) {
        e.preventDefault();
        if (typeof e.target.style.opacity != 'undefined') {
            e.target.style.opacity = '1';
        } else {
            e.target.style.filter = "alpha(opacity=100)";
        }//针对FF 在dragend 时候阻止冒泡
        removeClass(e.target, "zIndex");
    }//发生在被拖拽物体身上

    function addClass(node, newclass) {
        if (node.className.indexOf(newclass) > 0) {
            return;
        }
        node.className = node.className ? node.className + " " + newclass : newclass;
    }

    function removeClass(node, className) {
        if (typeof node.classList != 'undefined') {
            node.classList.remove(className);
        } else {
            var classarr = node.className.split(/\s+/);
            var arr = [];
            for (var i = 0; i < classarr.length; i++) {
                if (classarr[i] == className)continue;
                arr.push(classarr[i]);
            }
            node.className = arr.join(" ");
        }
    }
}


//排序层里面的保存按钮
$(document).on('click', '.save-sort', function () {
    $('.loading').show();
    var _content_big = "";
    var _content_small = "";
    var modle = "";
    $("#sort_content li").each(function (i, item) {
        var _i = i + 1;
        var _info = $(this).find('img').attr('data-info');//各类信息
        var _type = _info.substring(0, 9);
        if (_type == "$$##1##$$") {
            //文本
            modle = "text";
        } else if (_type == "$$##2##$$") {
            //图片
            modle = "Image";
        } else {
            //视频
            modle = "Video";
        }

        _content_big += '<li id="mainSort' + _i + '" data-name="' + _i + '" data-sort="' + _i + '" type=' + modle + '>' +
            '<div class="mainSortBox">' +
            '<a href="javascript:;" class="remove thread-model-remove">×</a>' +
            '<h3 class="sort-handle">' +
            '<span><i></i><i></i><i></i></span>' +
            '</h3>';
        if (_type == "$$##1##$$") {
            _content_big += '<textarea placeholder="在此输入正文内容。" class="txt-input" style="color:black;" >' + _info.substring(9, _info.length) + '</textarea>'
        } else if (_type == "$$##2##$$") {
            //图片
            var _content_image_description = _info.split("$$##ImageDescription##$$");//把url(包括宽+比例)和描述分隔开
            var _content_image_url = _content_image_description[0].split("$$##ImageInfo##$$");//把url单独拿出来
            var _location_begin = _content_image_url[1].indexOf('AspectRatio')//判断AspectRatio出现的位置,然后便于截取数据
            var _location_end = _content_image_url[1].indexOf('$$##ImageCover##$$')//判断AspectRatioEnd出现的位置,然后便于截取数据


            var _img_width = _content_image_url[1].substring(5, _location_begin);
            var ratio = _content_image_url[1].substring(_location_begin + 11, _location_end);
            var cover_model = _content_image_url[1].substring(_location_end + 18, _content_image_url[1].length);
            if (_img_width > 728) {
                var addImgHtml_show_height = 728 / ratio
            } else {
                var addImgHtml_show_height = _img_width / ratio
            }

            _content_big += '<div class="content-box" style="overflow:hidden;height: ' + addImgHtml_show_height + 'px;">' +
                '<img src=' + _content_image_url[0].substring(9, _content_image_url[0].length) + ' style="height: 100%;" data-width=' + _img_width + ' data-ratio=' + ratio + '></div>'
            if (cover_model == "false") {
                _content_big += '<button class="button_cover" data-cover="false">设为封面</button>';
            } else {
                _content_big += '<button class="button_cover" data-cover="true" style="opacity: 0">设为封面</button>';
            }
            if (_content_image_description.length == 1) {
                _content_big += '<textarea placeholder="在此添加上方图片的描述，描述不超过500字。" class="description-input"></textarea>'
            } else if (_content_image_description.length == 2) {
                _content_big += '<textarea  class="description-input">' + _content_image_description[1] + '</textarea>'
            }
        } else {
            //视频
            var _content_video_description = _info.split("$$##VideoDescription##$$");
            _content_big += '<div class="content-box" style="overflow:hidden">' +
                '<video src=' + _content_video_description[0].substring(9, _content_video_description[0].length) + ' style="width: 728px;" controls="controls"></div>';
            if (_content_video_description.length == 1) {
                _content_big += '<textarea placeholder="在此添加上方视频的描述，描述不超过500字。" class="description-input"></textarea>'
            } else if (_content_video_description.length == 2) {
                _content_big += '<textarea class="description-input">' + _content_video_description[1] + '</textarea>'
            }
        }
        _content_big += '</div>' +
            '<a href="javascript:;" class="insert-model-btn" title="插入模块">+</a>' +
            '<span class="add-model" style="height:0;margin-top:0;margin-bottom:10px">' +
            '<a href="javascript:;" class="close-add-btn-box">×</a>' +
            '<div class="add-model-box">' +
            '<div class="intro">' +
            '<h5>点击右侧按钮，添加相对应的元素模块</h5>' +
            '<h6>还不太会用？看看<a href="publish-course.html" target="_blank">发帖教程</a></h6>' +
            '</div>' +
            '<div class="btn-box">' +
            '<a href="javascript:;" class="add-txt-btn" id="add-txt' + _i + '"><i></i>添加文字</a>' +
            '<a href="javascript:;" class="add-img-btn" id="add-img' + _i + '"><i></i>添加图片</a>' +
            '<a href="javascript:;" class="add-video-btn" id="add-video' + _i + '"><i></i>添加视频</a>' +
            '</div>' +
            '</div>' +
            '</span>' +
            '</li>';
        _content_small += '<li id="thumb' + _i + '" type=' + modle + ' data-name="' + _i + '">' +
            '<a href="javascript:;">' +
            '<em class="emReorder">' + _i + '</em>';
        if (_type == "$$##1##$$") {
            //文本
            _content_small += '<img src="../../image/publish_txt.png">'
        } else if (_type == "$$##2##$$") {
            //图片
            _content_small += '<img src=' + _content_image_url[0].substring(9, _content_image_url[0].length) + ' style="width: 124px;height: 82px;">'
        } else {
            //视频
            _content_small += '<video src=' + _content_video_description[0].substring(9, _content_video_description[0].length) + ' style="width: 124px;height: 82px;">'
        }
        _content_small += '</a></li>';
    });
    $(".sort-layer").slideUp(300);
    $('body').removeClass('body-overlay');
    $('.ui-sortable').html(_content_big);
    $(".thumbnail-box ol").html(_content_small);
    $('.loading').hide();

});


//排序层里面的取消按钮
$(document).on('click', '.sort-layer .sort-layer-cancel', function () {
    $(".sort-layer").slideUp(300);
    $('body').removeClass('body-overlay');
});


//显示文本框
function sore_show(data) {
    var _window_height= $(window).scrollTop();//卷起的高度
    var _data_name = $(data).attr('data-id');//图片框的序号
    var _document_width = $(".ui-selectable").width()-60;//屏幕宽
    var _left = $(data).offset().left;//与左边的间距
    var _top = $(data).offset().top;//与左边的间距
    var _data_content = "";
    $('.sort-layer .txt-show').show();

    //判断是在左边还是右边(获得小数部分)
    var _remainder = 130 * _data_name / _document_width-parseInt(130 * _data_name / _document_width);

    if (_remainder <= 0.5) {
        //左边
        $('.sort-layer .txt-show').css({
            left: _left + 'px',
            right: 'auto'
        });
        $('.sort-layer .txt-show span').css("text-align", "left");
    } else {
        //右边
        $('.sort-layer .txt-show').css({
            right: _document_width - _left + 'px',
            left: 'auto'
        });
        $('.sort-layer .txt-show span').css("text-align", "right");
    }

    //获取高度
    $('.sort-layer .txt-show').css('top', _top - _window_height + 'px');

    //获取内容
    var _info = $(data).attr('data-info');//各类信息
    var _type = _info.substring(0, 9);
    if (_type == "$$##1##$$") {
        //文本
        _data_content = _info.substring(9, _info.length);
    } else if (_type == "$$##2##$$") {
        //图片
        var _content_image_description = _info.split("$$##ImageDescription##$$");//把url(包括宽+比例)和描述分隔开
        _data_content = _content_image_description[1]
    } else {
        //视频
        var _content_video_description = _info.split("$$##VideoDescription##$$");
        _data_content = _content_video_description[1];
    }

    //显示内容
    if (_data_content) {
        $('.sort-layer .txt-show p').html(_data_content)
    } else {
        $('.sort-layer .txt-show').hide();
    }
}


//隐藏文本框
function sore_out(data) {
    $('.sort-layer .txt-show p').html('');
    $('.sort-layer .txt-show').hide();
}


//===================================================================================================================//
//                                                   发布  or  草稿箱                                                 //
//===================================================================================================================//
var title_info = "";
var motorcycle_info = "";
var content_info = "";
var content_type = "";//类型
var content_infomation = "";//文字  or  图片  or  视频
var content_infomation_old = "";//视频
var content_description = "";//描述
var content_width = "";//图片宽度
var content_radio = "";//图片宽高比
var content_cover = "";//封面图
var article_type = "";//判断是原创还是转载

function info_get() {
    title_info = $('.thread-title').val();
    motorcycle_info = $('.interest-label-list li').attr('id');
    $('.thread-content-list li').each(function () {
        var _type = $(this).attr('type');
        content_type = "";
        content_infomation = "";
        content_description = "";
        content_width = "";//图片宽度
        content_radio = "";//图片宽高比
        if (_type == "text") {
            content_type = "$$##Text##$$";
            content_infomation = $(this).find('.txt-input').val();
        } else if (_type == "image") {
            var _data_cover = $(this).find('.button_cover').attr('data-cover');
            if (_data_cover == "true") {
                content_cover = $(this).find('.content-box img').attr('src')
            } else {
                content_type = "$$##Image##$$";
                content_infomation = $(this).find('.content-box img').attr('src')+'!/fw/700/quality/80';
                content_description = $(this).find('textarea').val();
                content_width = $(this).find('.content-box img').attr('data-width');
                content_radio = $(this).find('.content-box img').attr('data-ratio');
                //汇总
                content_infomation = content_infomation + "$$##ImageInfo##$$Width" + content_width + "AspectRatioBegin" + content_radio + "AspectRatioEnd";
            }
        } else if (_type == "video") {
            content_type = "$$##Video##$$";
            if(content_infomation_old){
                //说明不是第一个video,需要考虑会不会出现AAAAA$$##Video##$$AAAAA$$##Video##$$AAAAA这种情况
                content_infomation = $(this).find('.content-box video').attr('src');
                if(content_infomation==content_infomation_old){
                    //如果相等,则说明是同一个视频重复加载了,让其传值内容置空
                    content_infomation="";
                }else{
                    //不相等,说明是一个新的视频,将新的src赋值给old,防止该src抽风,同时将该数据加载
                    content_description = $(this).find('textarea').val();
                    content_infomation_old=content_infomation;
                }
            }else {
                //第一次加载
                content_infomation = $(this).find('.content-box video').attr('src');
                content_infomation_old=content_infomation;
                content_description = $(this).find('textarea').val();
            }
        }
        if (_type == "image" && content_infomation != ''&& content_description != '') {
            content_info += content_type + content_infomation + "$$##ImageDescription##$$" + content_description + "$$##MotorTravel##$$";

        } else if (_type == "video" && content_infomation != ''&& content_description != '') {
            content_info += content_type + content_infomation + "$$##VideoDescription##$$" + content_description + "$$##MotorTravel##$$"
        } else if(content_type!='' && content_infomation != ''){
            //为了防止cover字段进入
            content_info += content_type + content_infomation + "$$##MotorTravel##$$"
        }
    });
    content_info = content_info.substring(0, content_info.length - 19);
    article_type = $('.thread-resource-interest .resourceChoice-curr').attr("data-type");
}